<template>
	<view class="activityDetails">
        <view class="details-top" v-if="pageParam.type == 'child_user'">
			<view class="details-top-title">
				总共申请
				<text class="details-top-num">{{openInfo.open_num}}</text>
				个超圳商行名额，当前绑定了
				<text class="details-top-num">{{openInfo.bind_num}}</text>
				个超圳商行名额，剩余
				<text class="details-top-num">{{openInfo.over_num}}</text>
				个名额！
			</view>
            
            <view class="details-top-but-box">
				<view class="details-top-but" @click="applyNum()">
					新增名额
				</view>
			</view>
        </view>
		<view class="list-box" v-for="(item,index) in pageResult.list" :key="index" :style="pageParam.type == 'child_user' && index == 0 ? 'margin-top:160rpx' : ''">
			<image class="user-img" :src="item.picture" mode="widthFix"></image>
			<view class="list-right" v-if="pageParam.type == 'user2' || pageParam.type == 'user3' || pageParam.type == 'user4' || pageParam.type == 'wholesaler'">
				<view class="user-name">{{item.username}}</view>
                <view class="user-bq" style="width: 100rpx;text-align: center;margin: 20rpx 0;"> {{item.typeName}} </view> 
				<view class="user-iphone"> {{item.mobile}} </view>
			</view>
			
			<view class="dianpu-box" v-else-if="pageParam.type == 'child_user'">
				<view class="child_user-title"> {{item.merchant_title}} <text class="child_user-no">{{item.no}}</text> </view>
				<view class="child_user-name"> {{item.username}} <text class="child_user-name-visc"> 业绩提成 {{item.achievement_ratio}} %</text> </view>
				<view class="child_user-results"> 业绩值：{{item.achievement}} </view>
				<view class="button-list-box">
					<button class="button1" type="default" @click="editBindUser(index)"> 更换店长 </button>
					<button class="button2" type="default" @click="upCommission(index)"> 修改提成比例 </button>
					<button class="button3" type="default" @click="upCommission(index)"> 业绩日志 </button>
				</view>
			</view>

			
			<view class="dianpu-box" v-else>
				<view class="dianpu-title"> <text class="user-dp-">{{item.title}} </text> <text class="user-bq"> {{item.typeName}} </text></view>
				<view class="dianpu-time"> {{item.validDate}} </view>
				
				<view class="dianpu-state">
					<show-status :name="item.statusName" size="160" fontSize="40" boder="5"
						:color="item.status==-1 ? '#cc0000' : (item.status==-2 ? '#fbca3f' : (item.status==1 ? '#009900' : '#FF0000')) ">
					</show-status>
				</view>
			</view>
		</view>
		
		
		<uni-popup ref="up" type="center">
			<view class="up-box">
				<view class="up-title"> 修改店铺员工业绩提成比例 </view>
				<view class="up-con">
					<input class="up-input" type="number" value="" v-model="inputVal" />
					<view class="up-con-visc"> 业绩提成比例为5%-70%，如员工业绩提成比例为70%，那么店铺的提成为10%； </view>
				</view>
				<view class="up-but-box">
					<view class="up-but1" @click="subConfig('one')"> 确认 </view>
					<view class="up-but2" @click="cancel()"> 取消 </view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="upAll" type="center">
			<view class="up-box">
				<view class="up-title"> 修改店铺员工业绩提成比例 </view>
				<view class="up-con">
					<input class="up-input" type="number" value="" v-model="merchantVal" />
					<view class="up-con-visc"> 业绩提成比例为5%-70%，如员工业绩提成比例为70%，那么店铺的提成为10%； </view>
				</view>
				<view class="up-but-box">
					<view class="up-but1" @click="subConfig('all')"> 确认 </view>
					<view class="up-but2" @click="cancel()"> 取消 </view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="code" type="center">
			<view class="up-box">
				<view class="up-title"> 申请员工超圳商城二维码 </view>
				<view class="up-con">
					<image class="code-img" :src="userCzImg" mode=""></image>
				</view>
				<view class="up-but-box">
					<view class="up-but" @click="cancel()"> 确认 </view>
					
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="editBind" type="center">
			<view class="up-box">
				<view class="up-title"> {{editTitle}} </view>
				<view class="up-con">
					<image class="code-img" :src="editBindImg" mode=""></image>
				</view>
				<view class="up-but-box">
					<view class="up-but" @click="cancel()"> 确认 </view>
					
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup">
		    <view class="show">
		        <view class="show_title">申请数量</view>
		        <input class="show_input" type="number" placeholder="请输入您要申请数量" v-model="payData.openNum"/>
		        <view class="show_info" v-if="openInfo.openRemark != ''">
		            <view>说明：</view>
		            <view v-html="openInfo.openRemark"></view>
		        </view>
		        <view class="show_btn">
		            <text class="show_text" @click="subFun(0)" style="color: rgba(60, 72, 104, 0.4)">取消</text>
		            <text class="show_text" @click="subFun(1)">确认</text>
		        </view>
		    </view>
		</uni-popup>
		<uni-popup ref="showPayView" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>开通费用</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="use_hdq > 0"  @click="setUseOther(1)">
					<text>使用互动券 {{use_hdq}} 抵扣金额 ￥{{use_hdq}}</text>
					<view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
				</view>
				<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
					<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(payInfo.user_money) >= Number(pay_money)"></view>
					<text v-else @click="jump('on_line_recharge')" style="width: 190upx;">余额不足</text>
				</view>
				<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
			</view>
		</uni-popup>
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'" v-if="pageParam.type == 'child_user'">
			<view :class="['but', index == 1 ? 'but2' : '']" v-for="(item,index) in pageResult.but" :key="index" @click="buttonBut(index)">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import uniQrcode from '../static/wxqrcode.js';
	import wechatPay from '../static/wechatPay.js';
	export default {
		data() {
			return {
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 'user',
					itemId: 0, 
					page: 0,
				},
				pageResult: {
					list: [],
					but:[{title:'修改业绩提成比例'},{title:'申请员工超圳商城'}],
					isEmpty: false,
					isEnd: false
				},
				merchantVal: 80,
				userCzImg: '',
				inputId: 0,
				inputVal: 0,
				bottomHeight: 110,
                
                openInfo: {
                    open_num : 0,
                    bind_num : 0,
                    over_num : 0,
                    openRemark : 0,
                },
                payInfo : {
                    money: 600,
                    user_money: 0,
                    user_hdq: 0,
                    sure_hdq: 180,
                },
                payData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    is_use_hdq: 0,
                    payment_type: 1,
                    applyType: 'merchant_num',
                    mid: 0,
                    openNum: 3,
                },
                isPay: true,
                pay_money: 0,
                use_hdq : 0,
                editTitle: '',
				editBindImg: '',
			}
		},
		methods: {
			/* 修改单个用户提成弹框 */
			upCommission(key){
				let item = _self.pageResult.list[key];
				_self.inputId = key;
				_self.inputVal = item.achievement_ratio;
				_self.$refs.up.open();
			},
			buttonBut(index){
				_self.inputId = 0;
				if(index == 0){
					_self.$refs.upAll.open();
				}else{
					_self.$refs.code.open();
				}
			},
			editBindUser(key) {
				let item = _self.pageResult.list[key];
				_self.editTitle = '更换' + item.merchant_title + '店长';
				_self.editBindImg = uniQrcode.createQrCodeImg(item.editBindUrl, {
					size: parseInt(200)   
				});
				_self.$refs.editBind.open();
			},
			/* 关闭弹框 */
			cancel(){
				_self.$refs.code.close();
				_self.$refs.upAll.close();
				_self.$refs.up.close();
				_self.$refs.editBind.close();
			},
			subConfig(type) {
				let editId = 0;
				let key = _self.inputId;
				if(type == 'one') {
					let item = _self.pageResult.list[key];
					editId = item.id;
				}
				let editVal = type == 'one' ? _self.inputVal : _self.merchantVal;
				serve.request({
					url: '/spread/merchant/set-config',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						itemId: _self.pageParam.itemId, 
						editId: editId,
						editVal: editVal
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon : 'none',
					});
					if(res.code == 200 && type == 'one') {
						_self.pageResult.list[key].achievement_ratio = editVal;
						_self.cancel();
					}
					uni.hideLoading();
				});
			},
			getList(){
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				_self.pageParam.page++
				serve.request({
					url: '/spread/business/list',
					data: _self.pageParam
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						_self.pageResult.list=_self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
					uni.hideLoading();
				});
			},
			getAchievementConfig() {
				serve.request({
					url: '/spread/merchant/achievement-config',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						itemId: _self.pageParam.itemId, 
					}
				}).then(res => {
					_self.merchantVal = res.data.merchantVal;
					let codeUrl = res.data.codeUrl;
					_self.userCzImg = uniQrcode.createQrCodeImg(codeUrl, {
						size: parseInt(200)   
					});
                    _self.openInfo = res.data.openInfo;
                    _self.payInfo = res.data.account;
					uni.hideLoading();
				});
			},
			applyNum(){
                 _self.$refs.popup.open();
            },
            subFun(type) {
                if(type == 0) {
                    _self.$refs.popup.close();
                    return ;
                }
                if(_self.payData.openNum <= 0) {
                    uni.showToast({
                    	title: "请填写正确的开通数量",
                    	icon : 'none'
                    });
                    return ;
                }
                _self.calculationTotalMoney();
                _self.$refs.popup.close();
                _self.$refs.showPayView.open();
            },
            subPayForm() {
                if(_self.isPay == false) {
                	return ;
                }
                _self.isPay = false;
                serve.request({
                	url: '/spread/merchant/open-num',
                	data: _self.payData
                }).then(res => {
                	_self.isPay = true;
                	if(res.code != 200){
                		uni.showToast({
                			title: res.message,
                			icon: 'none',
                		});
                		return ;
                	}
                	if(res.data.isPay == 1) {
                		wechatPay.payItemFun(res.data.payType, res.data.payId, res.data.pageUrl);
                	} else {
                		uni.redirectTo({
                			url:res.data.pageUrl
                		})
                	}
                });
            },
            setUseOther(type) {
            	if(type == 1) {
            		_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
            	} 
            	_self.calculationTotalMoney();
                _self.$forceUpdate();
            },
            selPayType(payType) {
            	if(payType == 5 && Number(_self.payInfo.user_money) < Number(_self.pay_money)) {
            		return ;
            	}
            	_self.payData.payment_type = payType;
                _self.$forceUpdate();
            },
            calculationTotalMoney() {
                _self.pay_money = _self.payData.openNum * _self.payInfo.money;
                let totalHdq = _self.payData.openNum * _self.payInfo.sure_hdq;
                if(totalHdq > 0 && _self.payInfo.user_hdq > 0) {
                    _self.use_hdq = _self.payInfo.user_hdq > totalHdq ? totalHdq : _self.payInfo.user_hdq;
                	if(_self.payData.is_use_hdq) {
                		_self.pay_money = Number(_self.pay_money) - Number(_self.use_hdq);
                	}
                }
                _self.$forceUpdate();
            },
            showShare(){
            	_self.$refs.shareBox.open();
            },
            close() {
            	_self.$refs.showPayView.close();
                _self.$refs.popup.close();
            },
            jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			_self.pageParam.type = options.type || 'user';
			_self.pageParam.itemId = options.itemId || 0;
			_self.payData.mid = options.itemId || 0;
			wx.setNavigationBarTitle({
				title: options.title,
			});
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 150;
			}
			if(_self.pageParam.type == 'child_user') {
				_self.getAchievementConfig();
			}
			_self.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	
	.details-top{
		position: fixed;
		left: 0;
		top: 0;
		background: #ffffff;
		display: flex;
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid rgba(134,134,134,.3);
	}
	.details-top-title{
		flex: 7.5;
		font-size: 30rpx;
	}
	.details-top-num{
		color: #e44b4b;
		font-size: 36rpx;
	}
	.details-top-but-box{
		flex: 2.5;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.details-top-but{
		padding: 18rpx;
		background: #e44b4b;
		border-radius: 8rpx;
		color: #fff;
		font-size: 30rpx;
	}
	
	
	.list-box{
		border-bottom: 2rpx solid #ededed;
		display: flex;
		padding: 20rpx 0;
		
		justify-content: flex-start;
		align-items: center;
		margin: 30rpx 0;
		padding-bottom: 40rpx;
	}
	.user-img{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.list-right{
		margin-left: 40rpx;
	}
	.user-name{   
	}
	.user-bq{
		padding: 4rpx 20rpx;
		background-color: #DD6161;
		color: #FFFFFF;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	.user-iphone{
		color: #777777;
		margin-top: 12rpx;
	}
	
	.dianpu-box{
		margin-left: 30rpx;
		width: 522rpx;
		position: relative;
		// height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
	}
	.dianpu-title{
		    /* -webkit-line-clamp: 2;
		    overflow: hidden;
		    word-break: break-all;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
		    width: 340rpx; */
	}
	.user-dp-{
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		width: 340rpx;
	}
	.dianpu-time{
		font-size: 28rpx;
	}
	.dianpu-state{
		position: absolute;
		top: -26rpx;
		right: -10rpx;
	}
	.child_user-title{
		
	}
	.child_user-no{
		margin-left: 40rpx;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
		background-color: #e45252;
		color: #FFFFFF;
	}
	
	.child_user-name{
		line-height: 50rpx;
	}
	.child_user-name-visc{
		margin-left: 40rpx;
	}
	
	.child_user-results{
		
	}
	.button-list-box{
		display: flex;
		width: 100%;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
	}
	.button1{
		width: 140rpx;
		height: 60rpx;
		padding: 0 14rpx;
		font-size: 24rpx;
		border-radius: 40rpx;
		border: 0;
		background: #5a85ff;
		color: #ffffff;
	}
	.button2{
		width: 180rpx;
		height: 60rpx;
		padding: 0 14rpx;
		font-size: 24rpx;
		border-radius: 40rpx;
		border: 0;
		background: #ff5a5a;
		color: #ffffff;
	}
	.button3{
		width: 140rpx;
		height: 60rpx;
		padding: 0 14rpx;
		font-size: 24rpx;
		border-radius: 40rpx;
		border: 0;
		background: #afabab;
		color: #ffffff;
	}
	
	
	.but-box{
		    width: 100vw;
		    height: 120rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    position: fixed;
		    left: 0;
		    bottom: 0;
		    background: #fff;
	}
	.but{
		    width: 50vw;
		    height: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    background: #FBCA3F;
		    color: #fff;
		    font-size: 32rpx;
	}
	.but2{
		    background: #e44b4b;
	}




	.up-box{background: #fff;width: 70vw;padding: 20rpx 20rpx 10rpx 20rpx;border-radius: 12rpx;}
	.up-title{text-align: center;line-height: 80rpx;font-size: 36rpx;}
	.up-con{padding: 20rpx;display: flex;flex-direction: column;align-items: center;}
	.code-img{width: 300rpx;height: 300rpx;margin: 20rpx;}
	.up-input{width: 300rpx;border: 2px solid #dfdfdf;padding: 10rpx;border-radius: 10rpx;}
	.up-con-visc{font-size: 30rpx;margin-top: 30rpx;color: #333;}
	.up-but-box{display: flex;width: 100%;justify-content: center;text-align: center;}
	.up-but{width: 100%;height: 60rpx;line-height: 60rpx;}
	.up-but1{width: 50%;border-right: 2rpx solid #dfdfdf;height: 60rpx;line-height: 60rpx;}
	.up-but2{width: 50%;color: #999999;height: 60rpx;line-height: 60rpx;}

	.show{
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.show_title{
		text-align: center;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
	}
	.show_input{
		padding: 20rpx 30rpx;
		border: 2rpx solid #ccc;
		width: 80%;
		margin: 50rpx 5%;
	}
	.show_info{
		padding: 0 20rpx 40rpx;
	}
	.show_btn{
		font-size: 28rpx;
		// padding: 20rpx 90rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1rpx rgba(60, 72, 104, 0.05) solid;
	}
	.show_text{
		width: 50%;
	    height: 100rpx;
	    line-height: 100rpx;
	    text-align: center;
	}
	.pay_type {
		position: relative;
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 140upx;
		max-height: 80vh;
	
		text {
			font-size: 42rpx;
		}
	
		.close {
			position: absolute;
			width: 23upx;
			height: 23upx;
			right: 40upx;
			top: 45upx;
		}
	
		.title {
			width: 100%;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			font-size: 36upx;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
		}
	
		.paypir {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			// padding: 20upx 0upx 20upx;
			font-size: 28upx;
	
			text:last-child {
				color: #FF5F60;
				font-size: 50upx;
				font-weight: bold;
				margin-top: 10upx;
			}
		}
	
		.line2 {
			width: 100%;
			box-sizing: border-box;
			padding: 36upx;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #333333;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
	
			.txt {
				color: #999999;
			}
	
			.nosel {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 50%;
			}
	
			.sel {
				background-image: url(../static/img/check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
			
			.nocheck {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 20%;
			}
			
			.check {
				background: url(../static/img/checkbox_check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
		}
	
		.pay_bot {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 100upx;
			background: #FFBF0A;
			color: #fff;
			font-size: 32upx;
			line-height: 100upx;
			text-align: center;
			border-radius: 0;
	
			&::after {
				border: none;
			}
		}
	}
</style>
